<!--
 * @Author: panda
 * @Date: 2022-05-18 12:25
 * @Description: 专栏视图
-->
<template>
  <div>
    <el-row>
      <el-col :span="4" />
      <!-- 专栏类目栏 -->
      <el-col :span="3">
        <el-space direction="vertical" size="large" style="margin-top: 25px">
          <div>PANDA ARTICLE</div>
          <el-button
            type="text"
            size="large"
            style="font-size: 20px"
            v-for="c in categories"
            :key="c.id"
            @click="getArticles(c.id)"
          >{{ c.categoryName }}
          </el-button>
        </el-space>
      </el-col>
      <el-col :span="11">
        <div v-infinite-scroll="load" :style="{ height: `${pageHeight}px` }">
          <el-card
            class="box-card"
            shadow="hover"
            v-for="i in articles"
            :key="i.id"
          >
            <!--            <router-link :to="{path: '/articles/'+i.id}" target="_blank">-->
            <div class="card-header">
              <span class="title" @click="toDetail(i.id)">{{ i.title }}</span>
            </div>
            <el-container>
              <el-aside width="256">
                <el-image
                  style="
                    border-radius: 5px;
                    margin-top: 20px;
                    width: 320px;
                    height: 200px;
                  "
                  fit="cover"
                  :src="i.thumbnail"
                />
              </el-aside>
              <el-main>
                <div class="article-thumbnail">{{ i.summary }}</div>
              </el-main>
            </el-container>
            <!--            </router-link>-->
            <el-button style="border: none">
              <el-icon>
                <arrow-up-bold />
              </el-icon>
              点赞
            </el-button>
            <el-button style="border: none">
              <el-icon>
                <chat-square />
              </el-icon>
              评论
            </el-button>
            <el-button style="border: none">
              <el-icon>
                <star />
              </el-icon>
              收藏
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4" />
    </el-row>
  </div>

</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import {articleApi} from "@/api/article";
import {InitArticleList} from "@/api/model/article";
import {Categories} from "@/api/model/category";
import {useRouter} from "vue-router";
import {ArrowUpBold, ChatSquare, Star} from "@element-plus/icons-vue";
import {debounce} from "@/utils/debounce";
import {categoryAPI} from "@/api/category";

export default defineComponent({
  components: {ArrowUpBold, ChatSquare, Star},
  setup() {
    // 组件文章列表以及当前分页属性
    const article = reactive(new InitArticleList());
    let pageNum = 1;
    let pageSize = 1;
    const pageHeight = ref(0);
    const hasMore = ref(true);
    let categoryId = 0;
    const router = useRouter();
    const category = reactive(new Categories());

    const getArticles = (id: number) => {
      categoryId = id;
      articleApi
        .getAllArticles({pageNum, pageSize, categoryId})
        .then((res) => {
          const {data} = res.data;
          article.articles = data.rows;
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 无限滚动 TODO 有bug
    const load = debounce(() => {
      articleApi
        .getAllArticles({pageNum, pageSize, categoryId})
        .then((res) => {
          const {data} = res.data;
          if (data.total <= article.articles.length) {
            hasMore.value = false;
          } else {
            hasMore.value = true;
            pageNum++;
            data.rows.forEach(function (key: any) {
              article.articles.push(key);
            });
          }
        });
    }, 1000);

    onMounted(() => {
      categoryAPI
        .getCategories({})
        .then((res) => {
          const {data} = res.data;
          category.categories = data;
        })
        .catch();
      articleApi
        .getAllArticles({pageNum, pageSize, categoryId})
        .then((res) => {
          const {data} = res.data;
          article.articles = data.rows;
        })
        .catch((err) => {
          console.log(err);
        });
      // 动态获取窗口height
      pageHeight.value = document.documentElement.offsetHeight; // 获取浏览器可视区域高度
      window.onresize = debounce(() => {
        pageHeight.value = document.documentElement.offsetHeight; // 获取浏览器可视区域高度
      }, 200);
    });
    const toDetail = (id: string | number) => {
      const routeData = router.resolve({
        path: "/articles/" + id,
        // params: {"id": id}
      });
      window.open(routeData.href, "_blank");
    };

    return {
      pageHeight,
      toDetail,
      load,
      categoryId,
      hasMore,
      ...toRefs(category),
      getArticles,
      ...toRefs(article),
    };
  },
});
</script>

<style scoped>

/* 文章列表样式 */
.title {
  font-size: 20px;
}

.article-thumbnail {
  font-size: 16px;
}

.box-card {
  /*width: 750px;*/
  border: none;
  margin-top: 15px;
  padding-bottom: 20px;
}
</style>
